<script setup lang="ts">
import Banner from "@/views/home/banner/Banner.vue";
import Search from "@/views/home/search/Search.vue";
import Level from "@/views/home/level/Level.vue";
import Region from "@/views/home/region/Region.vue";
import Card from '@/views/home/card/Index.vue'
import Tip from '@/views/home/tip/Tip.vue'
import { ref,onMounted} from 'vue'
import {reqHospital} from '@/api/home/index.ts'
import type {Content,HospitalResponseData} from '@/api/home/type.ts'
// HospitalResponseData
const currentPage4 = ref<number>(1)
const pageSize4 = ref<number>(10)
const small = ref(false)
// 存储医院的数组
let hasHospitalArr = ref<Content>([])
// 已有医院的总个数
let total = ref<number>(0)
// 存储筛选医院时用到的数据
let hostype = ref<string>('')
let districtCode = ref<string>('')
// 获取子组件提供的等级参数
function getLevel(value:string){
  hostype.value=value
  getHospitalInfo()
}
// 获取子组件提供的地区的参数
function getRegion(value:string){
  districtCode.value=value
  getHospitalInfo()
}
onMounted(()=>{
  getHospitalInfo()
})
const getHospitalInfo = async()=>{
  let res:HospitalResponseData = await reqHospital(currentPage4.value,pageSize4.value,hostype.value,districtCode.value)
  if(res.code===200){
    hasHospitalArr.value=res.data.content
    total.value=res.data.totalElements
  }
}
// 当前页码改变时触发
const currentChange =()=>{
  getHospitalInfo()
}
// 分页器菜单下拉时触发
const sizeChange =()=>{
  getHospitalInfo()
}

</script>
<template>
<div>
  <Banner></Banner>
  <Search></Search>
  <el-row gutter="20">
    <el-col :span="20">
      <Level @getLevel="getLevel"></Level>
      <Region @getRegion="getRegion"></Region>
      <div class="hospital" v-if="hasHospitalArr.length>0">
        <Card v-for="(item,index) in hasHospitalArr" class="item" :hospitalInfo="item" v-bind:key="index"></Card>
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :background="true"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
        />
      </div>
      <el-empty v-else description="没有数据" />
    </el-col>
    <el-col :span="4">
      <Tip></Tip>
    </el-col>
  </el-row>
</div>
</template>
<style scoped lang="scss">
.hospital{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    width: 48%;
    margin-bottom: 15px;
  }
}
</style>